import React, { useState, useEffect, useRef } from 'react';
import * as echarts from 'echarts';

import './index.less';
export default function ChartLine() {
  const chartRef = useRef(null);
  const [myChart, setMyChart] = useState(null);
  const [echartsInterval, setEchartsInterval] = useState(null);

  useEffect(() => {
    renderChart();
  }, []);

  useEffect(() => {
    activeEcharts(-1);
  }, [myChart]);

  const renderChart = () => {
    const option = getChartOption();
    let chartInstance = null;
    const chart = echarts.getInstanceByDom(chartRef.current);
    if (chart) {
      chartInstance = chart;
    } else {
      chartInstance = echarts.init(chartRef.current, 'dark');
    }
    setMyChart(chartInstance);
    chartInstance.setOption(option);
  };

  const activeEcharts = (currentIndex) => {
    // 数据长度
    let dataLength = 7;
    // 清空tooltip定时器
    clearTimeout(echartsInterval);
    // 加载tooltip定时器
    const interval = setTimeout(() => {
      // 获取当前显示第几个数据，从0 开始。（取 显示次数除以数据长度的余数）
      currentIndex = (currentIndex + 1) % dataLength;
      // echarts的触发图表行为
      myChart.dispatchAction({
        type: 'showTip', // 触发的行为
        seriesIndex: 0, // 触发的数据对应的坐标系（通常只有一个y轴，取0）
        dataIndex: currentIndex, // 第几个数据显示toolTip
      });
      activeEcharts(currentIndex);
    }, 2000);
    setEchartsInterval(interval);
  };

  const getChartOption = () => {
    // 数据
    const optionList = {
      dataX: [
        '某某镇',
        '某某镇',
        '某某镇',
        '某某镇',
        '某某镇',
        '某某镇',
        '某某镇',
      ],
      data: [
        { name: '牛', data: [2000, 1800, 1900, 2200, 2000, 1000, 1990] },
        { name: '羊', data: [2000, 900, 1500, 1200, 1100, 2000, 1100] },
      ],
    };
    const width8 = (screen.width * 8) / 1920;
    const width18 = (screen.width * 18) / 1920;
    const width40 = (screen.width * 40) / 1920;

    const fontSize14 = (screen.width * 12) / 1920;

    const height4 = (screen.height * 4) / 1080;

    const option = {
      backgroundColor: 'transparent',
      color: ['#61D8FF', '#61FF79'],
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgb(0, 33, 82)',
        textStyle: {
          fontSize: fontSize14,
          color: 'white',
        },
        borderColor: '#4da0f8d6',
      },
      legend: {
        icon: 'rect',
        itemWidth: width18,
        itemHeight: height4,
        itemGap: width40,
        textStyle: {
          fontSize: fontSize14,
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(59, 78, 103, 1)',
          },
        },
        axisLabel: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
        data: optionList.dataX,
      },
      yAxis: {
        type: 'value',
        name: '单位：头',
        nameTextStyle: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(59, 78, 103, 1)',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(59, 78, 103, 1)',
          },
        },
        axisLabel: {
          fontSize: fontSize14,
          color: 'rgba(187, 224, 248, 1)',
        },
      },
      series: [
        {
          name: optionList.data[0].name,
          type: 'bar',
          data: optionList.data[0].data,
          symbol: 'none',
          barWidth: width8,
          // showBackground: true,
          // backgroundStyle: {
          //   color: 'rgba(207, 41, 41, 1)',
          // },
          itemStyle: {
            color: {
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0.1,
                  color: 'rgba(1, 143, 244, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(1, 151, 244, 0.10)', // 100% 处的颜色
                },
              ],
            },
          },
        },
        {
          name: optionList.data[1].name,
          type: 'bar',
          data: optionList.data[1].data,
          symbol: 'none',
          barWidth: width8,
          itemStyle: {
            color: {
              x: 0, //右
              y: 0, //下
              x2: 0, //左
              y2: 1, //上
              colorStops: [
                {
                  offset: 0.1,
                  color: 'rgba(47, 231, 217, 1)', // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgba(47, 231, 217, 0.10)', // 100% 处的颜色
                },
              ],
            },
          },
        },
      ],
    };
    return option;
  };

  return <div className="line_chart" ref={chartRef}></div>;
}
